<template>
  <div class="approval">
    <el-card class="box-card" style="margin-top: 110px;">
      <div class="title">{{$t('achievements.title1')}}</div>
      <div class="menu-search">
        <!-- 角色名称 -->
        <div class="menu-title">
          <div class="searchItem">
            <span>{{$t('roleManager.roleName')}}</span>
            <el-input
              v-model="listQuery.groupName"
              size="small"
              :placeholder="$t('roleManager.inpRoleName')"
            ></el-input>
          </div>
          <div class="menu-title-btn" style="margin-left: 20px;">
            <button type="button" @click="search">{{$t('btn.query')}}</button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px;margin-bottom: 20px;">
      <div style="display: flex; justify-content: space-between;">
        <div class="title">{{$t('DailyStatistics.ListDetails')}}</div>
        <div>
          <!-- 添加角色 -->
          <el-button type="primary" size="small" @click="handleCreate" v-if="roleManager_add_role">{{$t('roleManager.addRole')}}</el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 5px;"
        border
        size="mini"
      >
        <el-table-column :label="$t('user.num')" header-align="center" align="center" width="60">
          <template slot-scope="scope">
            <span>{{scope.row.index}}</span>
          </template>
        </el-table-column>
        <!-- 角色名称 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="name"
          :label="$t('roleManager.roleName')"
          width="340"
        ></el-table-column>
        <!-- 角色描述 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="description"
          :label="$t('roleManager.roleDesc')"
          width="500"
        ></el-table-column>
        <!-- 状态 -->
        <el-table-column
          header-align="center"
          align="center"
          prop="attr3"
          width="160"
          :label="$t('grouping.status')"
        >
          <template slot-scope="scope">
             <el-radio-group v-model='scope.row.attr3' size="small" @change.native="changeStatus(scope.row)">
                <el-radio label="1" size="mini">{{$t("grouping.enable")}}</el-radio>
                <el-radio label="2" size="mini">{{$t("AppVersion.blockup")}}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('user.operation')" width="150" fixed="right">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              size="small"
              type="text"
              @click="handleUpdate(scope.row)"
              v-if="roleManager_edit_role"
            >{{$t('btn.edit')}}</el-button>
            <!-- 删除 -->
            <el-button
              size="small"
              type="text"
              style="color: #f56c6c;"
              @click="handleDelete(scope.row)"
              v-if="roleManager_delete_role"
            >{{$t('btn.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      width="80%"
      :visible.sync="dialogSendFormVisible"
      :before-close="closeDialog"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        label-position="left"
        style="width: 95%;"
      >
        <!-- 角色名称 -->
        <el-form-item :label="$t('roleManager.roleName')" prop="name">
          <el-input size="small" v-model="form.name"></el-input>
        </el-form-item>
        <!-- 角色描述 -->
        <el-form-item :label="$t('roleManager.roleDesc')" prop="description">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5}"
            v-model="form.description"
            :placeholder="$t('rule.toLength')" 
            :maxlength="500"
          ></el-input>
        </el-form-item>
        <!-- 配置权限 -->
        <el-form-item :label="$t('roleManager.configAuth')" prop="menuTreeVO">
          <div class="deliverySetting">
            <div class="deliverySetting-table">
              <div class="table-head">
                <div class="selection">
                  <el-checkbox v-model="ischeckAll" @change="handleCheckAllChange">{{$t('roleManager.selectAll')}}</el-checkbox>
                </div>
              </div>
              <el-collapse>
                <el-collapse-item 
                v-for="(partition,partitionIndex) in form.menuTreeVO"
                :key="partitionIndex">
                    <template slot="title">
                        <div style="display: flex;">   
                            <div class="menu-item" style="width: 100px;">
                                <el-checkbox
                                    v-model="partition.selected"
                                    @change="handleCheckedCountryAllChange(partitionIndex,$event)"
                                    :key="partitionIndex"
                                >{{ partition.name }}</el-checkbox>
                            </div>
                            <div v-for="(btnItem, btnIndex) in partition.btnList" :key="btnIndex" style="margin-left: 50px;">
                                <el-checkbox
                                    v-if="partition.children.length === 0"
                                    v-model="btnItem.selected"
                                    @change="handleCheckedFirstBtnChange(partitionIndex,btnItem.btnId,$event)"
                                    :label="btnItem.btnId"
                                    :disabled="partition.selected === false"
                                >{{btnItem.btnName}}</el-checkbox>
                            </div>
                        </div>
                    </template>
                    <el-collapse>
                        <el-collapse-item  v-for="(secondItem, secondIndex) in partition.children" :key="secondIndex">
                            <template slot="title">
                                <div class="menu-item">
                                    <el-checkbox
                                        v-model="secondItem.selected"
                                        @change="handleCheckedCountryChange(partitionIndex,secondIndex,secondItem.id,$event)"
                                        :label="secondItem.id"
                                    >{{secondItem.name}}</el-checkbox>
                                </div>
                                <el-checkbox
                                    v-if="secondItem.children.length === 0"
                                    v-for="(btnItem, btnIndex) in secondItem.btnList"
                                    v-model="btnItem.selected"
                                    @change="handleCheckedSecondBtnChange(partitionIndex,secondIndex,btnItem.btnId,$event)"
                                    :label="btnItem.btnId"
                                    :key="btnIndex"
                                    :disabled="secondItem.selected === false"
                                >{{btnItem.btnName}}</el-checkbox>
                            </template>
                            <div v-for="(thirdItem, thirdIndex) in secondItem.children" :key="thirdIndex" style="display: flex;padding: 5px 0 5px 40px;box-sizing: border-box;">
                                <div class="menu-item">
                                    <el-checkbox
                                        v-model="thirdItem.selected"
                                        @change="handleCheckedThirdMenuChange(partitionIndex,secondIndex,thirdIndex,thirdItem.id,$event)"
                                        :label="thirdItem.id"
                                        >{{thirdItem.name}}</el-checkbox>
                                </div>
                                <div style="margin-left: 50px;">
                                    <el-checkbox
                                        v-if="secondItem.children.length > 0"
                                        v-for="(btnItem, btnIndex) in thirdItem.btnList"
                                        v-model="btnItem.selected"
                                        @change="handleCheckedBtnChange(partitionIndex,secondIndex,thirdIndex,btnItem.btnId,$event)"
                                        :label="btnItem.btnId"
                                        :key="btnIndex"
                                        :disabled="thirdItem.selected === false"
                                    >{{btnItem.btnName}}</el-checkbox>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          @click="create('form')"
          :loading="isAddLoading"
        >{{$t('btn.conserve')}}</el-button>
        <el-button
          v-if="dialogStatus=='update'"
          type="primary"
          @click="update('form')"
          :loading="isUpdateLoading"
        >{{$t('btn.conserve')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getAllRole,
  addRole,
  updateRole,
  deleteRole,
  startUpAndDown,
  getChannelTree,
  getEditChannelTree
} from "api/admin/roleManager/index";
export default {
  data() {
    return {
      roleManager_add_role: false,
      roleManager_edit_role: false,
      roleManager_delete_role: false,
      ischeckAll: false, //一级全选状态
      checkAll: false,
      dialogStatus: "",
      textMap: {
        create: this.$t("roleManager.addRole"),
        update: this.$t("roleManager.editRole")
      },
      form: {
        name: undefined,
        description: undefined,
        menuTreeVO: []
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("roleManager.ruleRoleName")
          }
        ],
        menuTreeVO: [
          {
            required: true,
            message: this.$t("roleManager.ruleChooseMenu")
          }
        ]
      },
      dialogSendFormVisible: false,
      listLoading: false,
      total: null,
      listQuery: {
        limit: 10,
        page: 1,
        groupName: ""
      },
      tableData: [],
      userGroupArr: [],
      currentId: "",
      isAddLoading: false,
     isUpdateLoading: false
    };
  },
  computed: {
    ...mapGetters(["elements"])
  },
  created() {
    this.roleManager_add_role = this.elements['roleManager:add_role'];
    this.roleManager_edit_role = this.elements['roleManager:edit_role'];
    this.roleManager_delete_role = this.elements['roleManager:delete_role'];
    this.getList();
  },
  methods: {
    handleCheckAllChange(event) {
      //全选change事件
      let e = event
      this.ischeckAll = e;
      for (let i = 0, len = this.form.menuTreeVO.length; i < len; i++) {
        // 一级全选反选
        this.form.menuTreeVO[i].selected = e;
        if (
          this.form.menuTreeVO[i].btnList &&
          this.form.menuTreeVO[i].btnList.length > 0
        ) {
          for (
            let a = 0, btn1 = this.form.menuTreeVO[i].btnList.length;
            a < btn1;
            a++
          ) {
            // 一级菜单的按钮全选反选
            this.form.menuTreeVO[i].btnList[a].selected = e;
          }
        }
        if (
          this.form.menuTreeVO[i].children &&
          this.form.menuTreeVO[i].children.length > 0
        ) {
          for (
            let j = 0, len1 = this.form.menuTreeVO[i].children.length;
            j < len1;
            j++
          ) {
            // 二级全选反选
            this.form.menuTreeVO[i].children[j].selected = e;
            if (
              this.form.menuTreeVO[i].children[j].btnList &&
              this.form.menuTreeVO[i].children[j].btnList.length > 0
            ) {
              for (
                let b = 0, btn2 = this.form.menuTreeVO[i].children[j].btnList.length;
                b < btn2;
                b++
              ) {
                // 二级菜单的按钮全选反选 
                this.form.menuTreeVO[i].children[j].btnList[b].selected = e;
              }
            }
            if (
              this.form.menuTreeVO[i].children[j].children &&
              this.form.menuTreeVO[i].children[j].children.length > 0
            ) {
              for (
                let k = 0,
                  len2 = this.form.menuTreeVO[i].children[j].children.length;
                k < len2;
                k++
              ) {
                // 三级全选反选
                this.form.menuTreeVO[i].children[j].children[k].selected = e;
                if (
                  this.form.menuTreeVO[i].children[j].children[k].btnList &&
                  this.form.menuTreeVO[i].children[j].children[k].btnList.length > 0
                ) {
                  for (
                    let m = 0,
                    len3 = this.form.menuTreeVO[i].children[j].children[k].btnList.length;
                    m < len3;
                    m++
                  ) {
                    // 三级菜单的按钮全选反选 
                    this.form.menuTreeVO[i].children[j].children[k].btnList[m].selected = e;
                  }
                }
              }
            }
          }
        }
      }
    },
    handleCheckedCountryAllChange(i, event) {
      // 一级菜单change事件
      let e = event
      this.form.menuTreeVO[i].selected = e;
      if (
        this.form.menuTreeVO[i].btnList &&
        this.form.menuTreeVO[i].btnList.length > 0
      ) {
        for (
          let a = 0, btn1 = this.form.menuTreeVO[i].btnList.length;
          a < btn1;
          a++
        ) {
          // 一级菜单的按钮全选反选
          this.form.menuTreeVO[i].btnList[a].selected = e;
        }
      }
      if (
        this.form.menuTreeVO[i].children &&
        this.form.menuTreeVO[i].children.length > 0
      ) {
        for (
          let j = 0, len1 = this.form.menuTreeVO[i].children.length;
          j < len1;
          j++
        ) {
          // 二级全选反选
          this.form.menuTreeVO[i].children[j].selected = e;
          if (
            this.form.menuTreeVO[i].children[j].btnList &&
            this.form.menuTreeVO[i].children[j].btnList.length > 0
          ) {
            for (
              let b = 0, btn2 = this.form.menuTreeVO[i].children[j].btnList.length;
              b < btn2;
              b++
            ) {
              // 二级菜单的按钮全选反选 
              this.form.menuTreeVO[i].children[j].btnList[b].selected = e;
            }
          }
          if (
            this.form.menuTreeVO[i].children[j].children &&
            this.form.menuTreeVO[i].children[j].children.length > 0
          ) {
            for (
              let k = 0,
                len2 = this.form.menuTreeVO[i].children[j].children.length;
              k < len2;
              k++
            ) {
              // 三级全选反选
              this.form.menuTreeVO[i].children[j].children[k].selected = e;
              if (
                this.form.menuTreeVO[i].children[j].children[k].btnList &&
                this.form.menuTreeVO[i].children[j].children[k].btnList.length > 0
              ) {
                for (
                  let m = 0,
                  len3 = this.form.menuTreeVO[i].children[j].children[k].btnList.length;
                  m < len3;
                  m++
                ) {
                  // 三级菜单的按钮全选反选 
                  this.form.menuTreeVO[i].children[j].children[k].btnList[m].selected = e;
                }
              }
            }
          }
        }
      }
      this.getIsCheckAll();
    },
    handleCheckedCountryChange(topIndex, secondIndex, sonId, event) {
      // 二级菜单change事件 
      let e = event
      let secondMenu = this.form.menuTreeVO[topIndex].children;
      let secondLen = secondMenu.length;
      let tickCount = 0;
      let unTickCount = 0;
      let secondBtn = this.form.menuTreeVO[topIndex].children[secondIndex].btnList;
      if ( secondBtn && secondBtn.length > 0) {
        for (
          let i = 0, len1 = secondBtn.length;
          i < len1;
          i++) {
          // 二级菜单下的按钮勾选
          secondBtn[i].selected = e;
        }
      }
      for (
        let i = 0, len1 = secondLen;
        i < len1;
        i++) {
        let thirdMenu = secondMenu[i].children;
        if (thirdMenu && thirdMenu.length > 0) {
          for (
            let j = 0, len2 = thirdMenu.length;
            j < len2;
            j++
          ) {
            if (thirdMenu[j].parentId === sonId) {
              // 三级菜单勾选
              thirdMenu[j].selected = e;
              let thirdBtn = thirdMenu[j].btnList;
              if ( thirdBtn && thirdBtn.length > 0) {
                for (
                  let m = 0, len3 = thirdBtn.length;
                  m < len3;
                  m++) {
                  // 三级菜单下的按钮勾选
                  thirdBtn[m].selected = e;
                }
              }
            }
          }
        }
        if (sonId === secondMenu[i].id) {
          // 二级菜单勾选
          secondMenu[i].selected = e;
        }
        if (secondMenu[i].selected === true) {
          tickCount++;
        } else if (secondMenu[i].selected === false) {
          unTickCount++;
        }
      }
      if (unTickCount === secondLen) {
        //一级全不勾选
        this.form.menuTreeVO[topIndex].selected = false;
      } else {
        this.form.menuTreeVO[topIndex].selected = true;
      }
      this.getIsCheckAll();
    },
    handleCheckedThirdMenuChange(topIndex, secondIndex, thirdIndex, thirdId, event) {
      // 三级菜单change事件
      let e = event
      let thirdMenu = this.form.menuTreeVO[topIndex].children[secondIndex].children;
      let thirdLen = thirdMenu.length;
      let tickCount = 0;
      let unTickCount = 0;
      let thirdBtn = this.form.menuTreeVO[topIndex].children[secondIndex].children[thirdIndex].btnList;
      if ( thirdBtn && thirdBtn.length > 0) {
        for (
          let m = 0, len1 = thirdBtn.length;
          m < len1;
          m++) {
          // 三级菜单下的按钮勾选
          thirdBtn[m].selected = e;
        }
      }
      for (
        let i = 0, len1 = thirdLen;
        i < len1;
        i++) {
        if (thirdId === thirdMenu[i].id) {
          // 三级菜单勾选
          thirdMenu[i].selected = e;
        }
        if (thirdMenu[i].selected === true) {
          tickCount++;
        } else if (thirdMenu[i].selected === false) {
          unTickCount++;
        }
      }
      if (unTickCount === thirdLen) {
        // 二级全不勾选
        this.form.menuTreeVO[topIndex].children[secondIndex].selected = false;
      } else {
        // 二级全勾选
        this.form.menuTreeVO[topIndex].children[secondIndex].selected = true;
        if (this.form.menuTreeVO[topIndex].children.length === 1) {
          this.form.menuTreeVO[topIndex].selected = true;
        }
      }
      this.getIsCheckAll();
    },
    // 一级按钮权限
    handleCheckedFirstBtnChange(topIndex, lastBtnId, event ) {
      let e = event
      var btnListArray = this.form.menuTreeVO[topIndex].btnList;
      var len = btnListArray.length;
      for (var i = 0; i < len; i++) {
        if (lastBtnId == btnListArray[i].btnId) btnListArray[i].selected = e;
      }
      this.getIsCheckAll();
    },
    // 二级按钮权限
    handleCheckedSecondBtnChange(topIndex, secondIndex, lastBtnId, event) {
      let e = event
      var btnListArray = this.form.menuTreeVO[topIndex].children[secondIndex].btnList;
      var len = btnListArray.length;
      for (var i = 0; i < len; i++) {
        if (lastBtnId == btnListArray[i].btnId) btnListArray[i].selected = e;
      }
      this.getIsCheckAll();
    },
    // 三级按钮权限
    handleCheckedBtnChange(topIndex, secondIndex, thirdId, lastBtnId, event) {
      let e = event
      var btnListArray = this.form.menuTreeVO[topIndex].children[secondIndex]
        .children[thirdId].btnList;
      var len = btnListArray.length;
      for (var i = 0; i < len; i++) {
        if (lastBtnId == btnListArray[i].btnId) btnListArray[i].selected = e;
      }
      this.getIsCheckAll();
    },
    getIsCheckAll() {
      var tickCount = 0,
        unTickCount = 0,
        ArrLength = this.form.menuTreeVO.length;
      for (var j = 0; j < ArrLength; j++) {
        //全选checkbox状态
        if (this.form.menuTreeVO[j].selected == true) tickCount++;
        if (this.form.menuTreeVO[j].selected == false) unTickCount++;
      }
      if (tickCount == ArrLength) {
        //二级全勾选
        this.ischeckAll = true;
      } else if (unTickCount == ArrLength) {
        //二级全不勾选
        this.ischeckAll = false;
      } else {
        this.ischeckAll = false;
      }
    },
    closeDialog(done) {
      done();
      this.$refs["form"].resetFields();
      this.getList();
    },
    // 点击添加按钮
    handleCreate() {
      this.form.name = undefined;
      this.form.description = undefined;
      this.dialogStatus = "create";
      this.isAddLoading = false;
      getChannelTree()
      .then(res => {
        this.form.menuTreeVO = res;
        this.dialogSendFormVisible = true;
        let num = 0;
        this.form.menuTreeVO.forEach(item => {
          if (item.selected === true) {
            num++;
          }
        })
        if (num === this.form.menuTreeVO.length) {
          this.ischeckAll = true;
        }
      })
    },
    // 添加保存按钮
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let m = 0;
          this.form.menuTreeVO.forEach(item => {
            if (item.selected === true) {
              m++;
            }
          })
          if (m === 0) {
            this.$message({
              showClose: true,
              type: "warning",
              message: this.$t('roleManager.onlyOne')
            });
          } else {
            this.$confirm(this.$t("loanDetail.cue1"), this.$t("user.cue2"), {
              confirmButtonText: this.$t("btn.confirm"),
              cancelButtonText: this.$t("btn.cancel"),
              type: "warning"
            })
              .then(() => {
                this.isAddLoading = true;
                addRole(this.form)
                .then((res) => {
                  this.isAddLoading = false;
                  if (res.status === 200) {
                    this.dialogSendFormVisible = false;
                    this.getList();
                    this.$notify({
                      title: this.$t('user.success'),
                      message: this.$t('user.crtsuccess'),
                      type: 'success',
                      duration: 2000
                    });
                  }
                });
              })
              .catch(() => {
                this.isAddLoading = false;
                this.$message({
                  showClose: true,
                  type: "info",
                  message: this.$t("orderQuery.cue2")
                });
              });
          }
        } else {
          return false;
        }
      });
    },
    // 点击编辑按钮
    handleUpdate(row) {
      this.currentId = row.id;
      this.dialogStatus = "update";
      this.isUpdateLoading = false;
      let obj = {};
      obj.groupId = row.id;
      getEditChannelTree(obj)
      .then(res => {
        this.form.menuTreeVO = res;
        this.form.name = row.name;
        this.form.description = row.description;
        this.dialogSendFormVisible = true;
        let num = 0;
        this.form.menuTreeVO.forEach(item => {
          if (item.selected === true) {
            num++;
          }
        })
        if (num === this.form.menuTreeVO.length) {
          this.ischeckAll = true;
        }
      })
    },
    // 编辑保存按钮
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let m = 0;
          this.form.menuTreeVO.forEach(item => {
            if (item.selected === true) {
              m++;
            }
          })
          if (m === 0) {
            this.$message({
              showClose: true,
              type: "warning",
              message: this.$t('roleManager.onlyOne')
            });
          } else {
            this.$confirm(this.$t("loanDetail.cue1"), this.$t("user.cue2"), {
              confirmButtonText: this.$t("btn.confirm"),
              cancelButtonText: this.$t("btn.cancel"),
              type: "warning"
            })
              .then(() => {
                this.form.roleId = this.currentId;
                this.isUpdateLoading = true;
                updateRole(this.form).then(() => {
                  this.isUpdateLoading = false;
                  this.dialogSendFormVisible = false;
                  this.getList();
                  this.$notify({
                    title: this.$t('user.success'),
                    message: this.$t('menu.uptsuccess'),
                    type: 'success',
                    duration: 2000
                  });
                });
              })
              .catch(() => {
                this.isUpdateLoading = false;
                this.$message({
                  showClose: true,
                  type: "info",
                  message: this.$t("orderQuery.cue2")
                });
              });
          }
        } else {
          return false;
        }
      });
    },
    // 点击删除按钮
    handleDelete(row) {
      this.$confirm(this.$t("userGroupManager.delWarn"), this.$t("user.cue2"), {
        confirmButtonText: this.$t("btn.confirm"),
        cancelButtonText: this.$t("btn.cancel"),
        type: "warning"
      })
        .then(() => {
          let obj = {};
          obj.roleId = row.id;
          deleteRole(obj)
            .then(res => {
              if (res.status === 200) {
                this.$notify({
                  title: this.$t('user.success'),
                  message: this.$t('user.delsuccess'),
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              }  else if (res.status === 201) {
                this.$message({
                  showClose: true,
                  type: "warning",
                  message: this.$t('roleManager.notDelRole')
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: this.$t("orderQuery.cue2")
          });
        });
    },
    // 修改状态
    changeStatus(row) {
      let obj = {};
      obj.id = row.id;
      obj.status = row.attr3;
      startUpAndDown(obj).then(res => {
        if (res.status === 200) {
          this.$message({
            showClose: true,
            type: "success",
            message: this.$t("approvalDispatch.opersuccess")
          });
          this.getList();
        } else if (res.status === 201) {
          this.$message({
            showClose: true,
            type: "warning",
            message: this.$t('roleManager.existUserUseRole')
          });
          this.getList();
        }
      });
    },
    getList() {
      this.listLoading = true;
      getAllRole(this.listQuery)
      .then(res => {
        if (res.status === 200) {
          this.listLoading = false;
          this.tableData = res.data.rows;
          this.tableData.forEach((item, index) => {
            item.index = index + (this.listQuery.page - 1) * this.listQuery.limit + 1
          })
          this.total = Number(res.data.total);
        } else {
          this.listLoading = true;
        }
      })
    },
    //查询
    search() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    }
  }
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.menu-title {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .searchItem {
    display: flex;
    align-items: center;
    padding: 10px 0;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      font-size: 12px;
      color: #5f5f61;
      padding-right: 5px;
    }
    div:nth-child(2) {
      width: 200px;
    }
  }
  .searchItem-date {
    display: flex;
    align-items: center;
    padding: 10px 0;
    b {
      margin: 0 10px;
      font-weight: normal;
      font-size: 12px;
      color: #5f5f61;
    }
    div {
      width: 150px;
    }
  }
}
.menu-title-btn {
  padding: 10px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(2) {
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}
.menu-list {
  padding: 20px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}
.deliverySetting {
  width: 100%;
  border: 1px solid #bfcbd9;
  border-radius: 4px;
  position: relative;
  height: 300px; 
  overflow: auto;
  .el-table {
    thead {
      tr {
        th {
          font-size: 14px;
        }
      }
    }
    tbody {
      tr {
        td {
          vertical-align: baseline;
          .el-checkbox-group {
            display: flex;
            flex-direction: column;
            label {
              line-height: 30px;
              margin-left: 0;
            }
          }
        }
      }
    }
  }
  .deliverySetting-table {
    font-size: 14px;
    .table-head {
      display: flex;
      padding: 10px 0;
      .selection {
        width: 30px;
        text-align: center;
        margin-left: 10px;
      }
    }
    .table-head {
      height: 36px;
      align-items: center;
      background-color: #e7f2ff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
}
.deliverySetting /deep/.el-checkbox__label {
  padding-right: 5px;
  box-sizing: border-box;
  color: #48576a;
  font-weight: normal !important;
}
.approval /deep/.el-form-item__content {
  line-height: 30px !important;
}
.approval /deep/.el-checkbox+.el-checkbox {
  margin-left: 0 !important;
}
.approval /deep/.el-collapse {
    border: 0;
    border-radius: 0;
    margin-left: 15px;
}
.menu-item /deep/.el-checkbox__label {
    font-weight: 700 !important;
}
.approval /deep/.el-checkbox {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-right: 0;
}
</style>